<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历：用于DOM树中遍历元素【元素嵌套，父子级】
		 children()
		 parent()
		 siblings()
		 next()
		 prev()
		 each()
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			 .container{
				 border: 1px solid black;
				 padding: 10px;
			 }
			 .container .box{
				 background-color: aqua;
				 padding: 10px;
				 margin: 10px;
			 }
			 button{
				 margin: 5px;
			 }
		 </style>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">欧美</div>
			<div class="box" id="box2">乱伦</div>
			<div class="box" id="box3">国产</div>
			<div class="box" id="box4">日韩</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">传媒</div>
		</div>
		<button id="gc">获取子元素</button>
		<button id="gp">获取父元素</button>
		<button id="gs">获取兄弟元素</button>
		<button id="gn">获取下一个兄弟元素</button>
		<button id="gr">获取上一个兄弟元素</button>
		<button id="loop">遍历元素</button>
		
		<script>
			//1.
			$("#gc").click(function(){
				$(".container").children().css("background-color","white");
			});
			//2.
			$("#gp").click(function(){
				$(".box").parent().css("background-color","black");
			});
			//3.
			$("#gs").click(function(){
				$("#box4").siblings().css("color","red");
				
			});
			//4.
			$("#gn").click(function(){
				$("#box4").next().css("background-color","yellow");
			});
			//5.
			$("#gr").click(function(){
				$("#box6").prev().css({
					"width":"200px",
					"height":"200px",
					"background-color":"green",
					"border-radius":"50%",
					"background-image":"url(../img/勾子之神.jpg)",
					"background-size":"100%",
					"box-shadow":"5px 5px 10px black",
					"font-size":"0px",
				});
			});
			//6.点击 遍历元素  按钮 实现每个盒子上，这是第一个盒子
			$("#loop").click(function(){
				//通过.box抓到6个元素【一组集合】
				$(".box").each(function(i,e){ //e 代表元素  i 代表下标
					//每个盒子加文字：这是第几个盒子
					$(e).text(`网站www.qq.com`+i);
				});
			});
			
				
			
		</script>
		
	</body>
</html>